<template>
  <div class="container">
    <UnifyTitle :leftmodel="true" :titlevalue="titlevalue"/>

    <div class="bgFFF bdradius4 pb76 pt30">
      <div class="datafoot pb118">
        <Form ref="ruleValidate" :rules="ruleValidate" :model="formData" v-if="tabsName === 'zhengce'">
          <FormItem prop="policyTitle" label="政策标题" style="display: flex;align-items: center;">
            <Input type="text" maxlength="80" show-word-limit placeholder="请输入政策标题" v-model="formData.policyTitle"
                   style="width: 500px"/>
          </FormItem>
          <FormItem prop="policyContent" label="" :label-width="0">
            <editor v-model="formData.policyContent" :height="444" :maxLength="3000" :show-word-limit="true"/>
          </FormItem>
          <FormItem prop="isTop" label="置顶">
            <i-switch v-model="formData.isTop" :true-value="1" :false-value="0"></i-switch>
          </FormItem>
        </Form>
        <Form ref="ruleValidate2" :rules="ruleValidate2" :model="formData" v-else>
          <FormItem prop="policyTitle" label="新闻标题" style="display: flex;align-items: center;">
            <Input type="text" maxlength="80" show-word-limit placeholder="请输入帮助问题" v-model="formData.policyTitle" style="width: 500px"/>
          </FormItem>
          <FormItem prop="policyTitle" label="新闻简介" style="display: flex;align-items: center;">
            <Input type="text" maxlength="80" show-word-limit placeholder="请输入新闻简介" v-model="formData.synopsis" style="width: 500px"/>
          </FormItem>
          <!-- <FormItem prop="policyContent" label="新闻简介" style="display: flex;align-items: flex-start;">
            <Input type="textarea" maxlength="300" show-word-limit placeholder="请输入帮助答案" :rows="6" v-model="formData.policyContent" style="width: 500px"/>
          </FormItem> -->
          <quill-editor v-model="formData.policyContent" label="新闻详情"></quill-editor>
          <button @click="a">点我</button>
        </Form>
      </div>
    </div>


    <div class="footer1">
      <div>
        <Button @click="goReturn">返回</Button>
        <Button class="ml20" type="primary"
                @click="submitproBt" :loading="loading">保存
        </Button>
      </div>
    </div>
    <!-- @click="submitproBt(tabsName === 'zhengce' ? 'ruleValidate' : 'ruleValidate2')" :loading="loading">保存 -->
  </div>
</template>

<script>
import Editor from "_c/Editor/index";
import { addJournalismList, journalismParticulars } from '@/api/data.js'

export default {
  components: {
    Editor,
  },
  data() {
    return {
      tabsName: "",
      formData: {
        isTop: 0,
        policyContent: '',
        policyTitle: '',
        synopsis: ''
      },
      loading: false,
      ruleValidate: {
        policyTitle: [{
          required: true,
          message: "请输入政策标题",
          trigger: "blur"
        },],
        isTop: [{
          type: "number",
          required: true,
          message: "请选择是否置顶",
          trigger: "change"
        },],
      },
      ruleValidate2: {
        policyTitle: [{
          required: true,
          message: "请输入帮助问题",
          trigger: "blur"
        },],
        policyContent: [{
          required: true,
          message: "请输入帮助答案",
          trigger: "blur"
        },],
      },
      id: ''
    };
  },
  computed: {
    titlevalue() {
      this.id = this.$route.query.id
      let tit = this.$route.query.id ? '编辑新闻' : '新建新闻';
      // let titName = this.tabsName === "zhengce" ? "政策" : "帮助";
      return tit
    }
  },
  watch: {},
  created() {
    // this.tabsName = this.$route.query.tabsName;
    if (this.$route.query.id) {
      this.getDetail(this.$route.query.id);
    }
  },
  methods: {
    a() {
      console.log(this.formData.policyContent);
    },
    // 详情
    async getDetail(id) {
      // this.APIS.policyDetail({id}).then((res) => {
      //   if (res.code == 20000) {
      //     this.formData = res.data;
      //   } else {
      //     this.$Message.error(res.message)
      //   }
      // });
      const res = await journalismParticulars({
        id
      })
      console.log('回显详情', res);
      this.formData.policyTitle = res.newsTitle
      this.formData.synopsis = res.newsDesc
      this.formData.policyContent = res.newsDetail
    },
    // 提交数据
    submitproBt(name) {
      console.log(this.$route.query.newsType,);
      this.$refs.ruleValidate2.validate(async (valid) => {
        console.log(valid);
        if (valid) {
          console.log('abc');
          var regex = /(<([^>]+)>)/ig
          let body = this.formData.policyContent
          let result = body.replace(regex, "");
          const res = await addJournalismList({
            newsType: this.$route.query.newsType ? this.$route.query.newsType : 1,
            newsTitle: this.formData.policyTitle,
            newsDesc: this.formData.synopsis,
            newsDetail: result
          })
          console.log(res);
        }
      })
      // this.$refs[name].validate((valid) => {
      //   if (valid) {
      //     let data = {
      //       ...this.formData,
      //       categoryId: this.tabsName === "zhengce" ? 1 : 2,   // 1 政策 2 帮助
      //     }
      //     /*if(data.policyContent.length > 4000){
      //       this.$Message.warning('文字最多4000字');
      //       return false
      //     }*/
      //     this.loading = true;
      //     if (this.$route.query.id) {
      //       this.APIS.policyEdit(data).then((res) => {
      //         this.loading = false;
      //         if (res.code == 20000) {
      //           this.$Message.success("编辑成功");
      //           this.goReturn();
      //         } else {
      //           this.$Message.error(res.message)
      //         }
      //       })
      //     } else {
      //       this.APIS.policyAdd(data).then((res) => {
      //         this.loading = false;
      //         if (res.code == 20000) {
      //           this.$Message.success("新建成功");
      //           this.goReturn();
      //         } else {
      //           this.$Message.error(res.message)
      //         }
      //       })
      //     }
      //   }
      // });
    },
    //回到政策管理
    goReturn() {
      this.$router.push({
        name: "loginPeople",
        query: {
          tabsName: this.tabsName
        }
      })
    },
  },
};
</script>


<style lang="less" scoped>
/deep/.ql-blank{
  height: 444px;
}
.datafoot {
  width: 841px;
  margin: 0 auto;
}

/*/deep/ .ivu-form-item {
  margin-bottom: 18px;
}*/

.footer1 {
  width: 100%;
  height: 64px;
  background: #ffffff;
  box-shadow: 0px -3px 8px rgba(0, 0, 0, 0.1);
  position: fixed;
  bottom: 0;
  z-index: 999;
  border-radius: 4px;
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>
